<template>
  <div class="agency">
    <div class="tab">
      <div :class="['agent',{active:curType=='agent'}]" @click="curType='agent'">{{agent.title}}</div>
      <div :class="['partner',{active:curType=='partner'}]" @click="curType='partner'">{{partner.title}}</div>
    </div>

    <div class="content">
      <!-- 步骤 -->
      <div class="step">
        <div class="step_icon">
          <i :class="['iconfont',step.icon]" v-for="step in agent.step"></i>
        </div>
        <div class="step_line">
          <em></em><em></em><em></em><em></em>
        </div>
        <div class="step_anme">
          <span v-for="step in agent.step">{{step.name}}</span>
        </div>
      </div>

      <!-- 规则概述 -->
      <div class="rule_overview">
        {{curType=='agent'?agent.rule_overview:partner.rule_overview}}
      </div>

      <div class="rule_divide"><span>规则详情</span></div>
      <!-- 规则详情 -->
      <div class="rule_detail">
        <p v-for="detail in (curType=='agent'?agent.rule_detail:partner.rule_detail)">{{detail}}</p>
      </div>

    </div>
    <div class="footer">
      <div class="button">{{curType=='agent'?agent.title:partner.title}}</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'agency',
    data () {
      return {
        curType:'agent',
        agent:{
          title:'我要成为代理商',
          step:[
            {name:'分享平台',icon:'icon-fenxiang'},
            {name:'扫码加入',icon:'icon-saoma'},
            {name:'打车支付',icon:'icon-zhifu'},
            {name:'提成收益',icon:'icon-e634'},
          ],
          rule_overview:'支付1元成为代理商后，分享二维码，当朋友扫码加入平台时，即可成为自己的下级会员。',
          rule_detail:[
            'A.当下级会员在平台使用叫车时，代理商可享受每单2元的收益；',
            'B.当下级会员在平台使用接单时，代理商可享受每单2元的收益；',
            'C.当下级会员在平台支付3000元加入合伙人时，可享受500元的收益；',
            'D.当有商家在平台投放广告时，可享受广告费50%收益;'
          ]
        },
        partner:{
          title:'我要成为合伙人',
          step:[
            {name:'',icon:''},
          ],
          rule_overview:'支付3000元成为代理商后，分享二维码，当朋友扫码加入平台时，即可成为自己的下级会员。',
          rule_detail:[
            'A.当下级会员在平台使用叫车时，代理商可享受每单2元的收益；',
            'B.当下级会员在平台使用接单时，代理商可享受每单3元的收益；',
            'C.当下级会员在平台支付3000元加入合伙人时，可享受800元的收益；',
            'D.当有商家在平台投放广告时，可享受广告费50%收益；',
            'E.可享受其它业务的收益，如未来会启动的酒店服务、加油服务、旅游服务、购物服务等；',
            'F.可享受平台股权、分红。'
          ]
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  
  .agency{
    width:100%;
    height:100%;
    overflow-x: auto;

    .tab{
      display: flex;
      align-items: center;
      justify-content: space-around;
      div{
        width:50%;
        line-height: 150px;
        text-align: center;
        font-size: 18px;
        &.active{
          color:#ff6633;
          border-bottom:5px solid #ff6633;
        }
      }
    }

    .content{
      padding:80px;
      >div{
        padding:50px 0;

      }
      .rule_divide{
        position: relative;
        width:100%;
        height:2px;
        padding:0;
        margin:50px 0;
        background:#2c2c2c;
        span{
          position: absolute;
          left:50%;
          top:50%;
          transform: translate3d(-50%,-50%,0);
          background:#fff;
          padding:0 40px;
        }
      }
    }
    .step{
      color:#ccc;
      .iconfont{font-size: 40px;}
      >div{
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .step_line{
        height:5px;
        margin:50px;
        background:#ff6633;
        display: flex;
        align-items: center;
        justify-content: space-between;
        em{
          position: relative;
          display: inline-block;
          circle:25px #fff;
          border:1px solid #ff6633;

          &:after{
            content:'';
            position: absolute;
            top:50%;
            left:50%;
            display: block;
            transform: translate3d(-50%,-50%,0);
            circle:12px #ff6633;
          }
        }
      }
    }
    .rule_overview{
      text-align: center;
    }

    .footer{
      width:80%;
      margin:50px auto;
      line-height: 150px;
      background: #2c2c2c;
      color:#fff;
      text-align: center;
      border-radius: 10px;
    }

  }
</style>
